<template>
  <div class="container">
    <div class="middle" v-for="item in booksInfo" :key="item.id">
      <div class="left">
        <img :src="item.book.image" />
      </div>
      <div class="right">
        <div class="bookName">{{ item.book.book_name }}</div>
        <div class="name" v-if="currentIndex == 0">
          借阅人：{{ item.borrower }}
        </div>
        <div class="name" v-if="currentIndex == 1">
          出租人：{{ item.owner }}
        </div>
        <div class="name" v-if="currentIndex == 2">
          {{ person == item.borrower ? "出租人:" : "借阅人:"
          }}{{ person == item.borrower ? item.owner : item.borrower }}
        </div>
        <div class="infor">
          <div class="phone">{{ item.book.phone }}</div>
          <div class="address">
            {{ item.book.address }}
          </div>
        </div>
        <div class="btn" v-if="item.shengyuTime < 0 && currentIndex == 2">
          <div :class="person == item.borrower ? 'status' : ''">已借到</div>
          <div :class="person == item.owner ? 'guihuan status' : 'guihuan'">
            已归还
          </div>
        </div>
        <div class="time" v-else>剩余归还日期:{{ item.shengyuTime }}天</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 1,
      booksInfo: [],
      person: "",
    };
  },
  methods: {
    shengyuTime(createTime, lendTime) {
      createTime = new Date(createTime).getTime();
      lendTime = lendTime * 1000 * 60 * 60 * 24;
      let t = new Date().getTime() - createTime;
      if (lendTime - t > 0) {
        var time = (lendTime - t) / (1000 * 3600 * 24);
        return Math.round(time);
      }
      return -1;
    },
    async changeIndex(index) {
      this.currentIndex = index;
      this.booksInfo = await this.getBooksInfo(index);
    },
    async getBooksInfo(currentIndex) {
      let { token } = this.$store.state;
      this.person = this.$store.state.userInfo.username;
      let res = await this.$http({
        url: "/book/borrow",
        headers: {
          Authorization: token,
        },
      });
      console.log(res);
      let booksInfo = res;
      if (currentIndex == 0) {
        booksInfo = booksInfo
          .map((item) => {
            return {
              ...item,
              shengyuTime: this.shengyuTime(
                item.create_time,
                item.book.lend_time
              ),
            };
          })
          .filter((item) => item.shengyuTime > 0 && item.owner == this.person);
        return booksInfo;
      }
      if (currentIndex == 1) {
        booksInfo = booksInfo
          .map((item) => {
            return {
              ...item,
              shengyuTime: this.shengyuTime(
                item.create_time,
                item.book.lend_time
              ),
            };
          })
          .filter(
            (item) => item.shengyuTime > 0 && item.borrower == this.person
          );
        return booksInfo;
      }
      if (currentIndex == 2) {
        booksInfo = booksInfo
          .map((item) => {
            return {
              ...item,
              shengyuTime: this.shengyuTime(
                item.create_time,
                item.book.lend_time
              ),
            };
          })
          .filter((item) => item.shengyuTime < 0);
        return booksInfo;
      }
    },
  },
};
</script>

<style scoped>
.container {
  padding: 0.9375rem 0.625rem;
}
.middle {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0.625rem;
  border-radius: 1.25rem;
  margin-top: 0.625rem;
}
.right {
  margin-left: 0.625rem;
}
.right view {
  margin: 0.3125rem 0;
}
.left img {
  width: 6.25rem;
  height: 8.4375rem;
  border-radius: 0.625rem;
}
.right .bookName {
  font-weight: 600;
  font-size: 0.9375rem;
}
.right .name {
  font-size: 0.78125rem;
  color: #4e4d4d;
  margin-top: 0.625rem;
}
.infor {
  display: flex;
  align-items: center;
  margin: 0.3125rem 0;
}
.infor div {
  display: flex;
  justify-content: center;
  border: 0.03125rem solid #c3c3c3;
  padding: 0.15625rem 0.625rem;
  font-size: 0.625rem;
  color: #747070;
  border-radius: 0.9375rem;
}
.infor .phone {
  width: 3.75rem;
}
.infor .address {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 0.625rem;
  width: 7.1875rem;
}
.time {
  background-color: #43cf7c;
  padding: 0.15625rem 0.625rem;
  color: #ffffff;
  font-size: 0.75rem;
  width: 6.5625rem;
  text-align: center;
}
.btn {
  display: flex;
  justify-content: space-between;
  width: 6.25rem;
}
.btn div {
  color: #2a82e4;
  border-radius: 0.3125rem;
  text-align: center;
  width: 2.5rem;
  padding: 0.15625rem;
  font-size: 0.625rem;
  border: 0.0625rem solid #2a82e4;
}
.guihuan {
  margin-left: 0.625rem;
}
.status {
  color: #ffffff !important;
  background-color: #2a82e4;
}
</style>